<template>
  <div class="svgDiv"></div>
</template>

<script>
import * as THREE from 'three';
import { SVGRenderer } from 'three/examples/jsm/renderers/SVGRenderer.js'
export default {
  name: "SvgRender.vue",
  methods: {
    init() {
       let svgDiv = document.getElementsByClassName('svgDiv')[0];
       let camera = new THREE.PerspectiveCamera(33, svgDiv.clientWidth/svgDiv.clientHeight, 0.1, 100);
       camera.position.z = 10;

       let scene = new THREE.Scene();
       scene.background = new THREE.Color(0, 0, 0);

       let renderer = new SVGRenderer();
       renderer.setSize(svgDiv.clientWidth, svgDiv.clientHeight);
       svgDiv.appendChild(renderer.domElement);

      const vertices = [];
      const divisions = 50;

      for (let i = 0; i < divisions; i++) {
         const v = (i/divisions) * (Math.PI * 2);
         const x = Math.sin(v);
         const z = Math.cos(v);
         vertices.push(x, 0 ,z);
      }

      const geometry = new THREE.BufferGeometry();
      geometry.setAttribute('position', new THREE.Float32Attribute(vertices, 3));
      for (let i = 0; i < 3; i++) {
        const material = new THREE.LineBasicMaterial({
          color: Math.random() * 0xffffff,
          linewidth: 10
        });
        const line = new THREE.Line(geometry, material);
        line.scale.setScalar( i / 3 );
        scene.add(line);
      }

      let animate = function () {
        let count = 0;
        const time = performance.now() / 1000;

        scene.traverse( function ( child ) {

          child.rotation.x = count + ( time / 3 );
          child.rotation.z = count + ( time / 4 );

          count ++;

        } );
        renderer.render( scene, camera );
        requestAnimationFrame( animate );
      }
      animate();

    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped>
.svgDiv {
  height: 100%;
}
</style>